﻿<template>
    <el-container>
        <el-header>
            <div class="left-panel">
                <el-button type="primary" icon="el-icon-plus" @click="openAdd">新增</el-button>
            </div>
            <div class="right-panel">
                <el-button :icon="Search"   type="primary" @click="opBindData">查询</el-button>
                <el-button :icon="Search" type="info" plain @click="resetSearch">重置</el-button>
                <el-button text type="primary" @click="showCondition = !showCondition">
                    <span v-if="!showCondition">展开</span>
                    <span v-else>收起</span>
                    <vab-icon
                        class="vab-dropdown"
                        :class="{ 'vab-dropdown-active': fold }"
                        icon="arrow-up-s-line"
                    />
                </el-button>
            </div>
        </el-header>
        <el-foot v-show="showCondition">
            <vab-query-form-top-panel>
                <el-form inline label-width="49px" :model="queryForm" style="margin-top: 5px">
                    <el-form-item label="借货时间" label-width="100px">
                        <el-date-picker
                            style="width: 300px"
                            v-model="queryList.backGoodsDates"
                            type="datetimerange"
                            value-format="YYYY-MM-DD HH:mm:ss"
                            format="YYYY-MM-DD HH:mm:ss"
                            range-separator="-"
                            unlink-panels="true"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            :default-time="defaultTime"
                        />
                    </el-form-item>
                    <el-form-item label="还货单号" label-width="100px">
                        <el-input
                            placeholder="---请输入还货单号---"
                            v-model="queryList.backGoodsOrderCode"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="还货单位" label-width="100px">
                        <sc-auto-complete
                         :orgType="1"
                         :queryType="'purchase-unity/search'"
                         :placeholder="'---请输入还货单位---'"
                         v-model="queryList.purchaseUnityName"
                         @handleSelect="(e)=>{this.queryList.purchaseUnityName=e.purchaseUnityName}"
                        />
                    </el-form-item>
                    <el-form-item label="联系人" label-width="100px">
                        <el-input
                            placeholder="---请输入联系人---"
                            v-model="queryList.purchaseUnityRealName"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="联系电话" label-width="100px">
                        <el-input
                            placeholder="---请输入联系电话---"
                            v-model="queryList.purchaseUnityMobile"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="物料编码" label-width="100px">
                        <el-input
                            placeholder="---请输入物料编码---"
                            v-model="queryList.materialCode"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="物料名称" label-width="100px">
                        <el-input
                            placeholder="---请输入物料名称---"
                            v-model="queryList.materialName"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="物料规格" label-width="100px">
                        <el-input
                            placeholder="---请输入物料名称---"
                            v-model="queryList.materialName"
                            style="width: 300px"
                        />
                    </el-form-item>
                    <el-form-item label="物料分类" label-width="100px">
                        <el-tree-select
                            placeholder="---请选择物料分类---"
                            collapse-tags
                            collapse-tags-tooltip
                            v-model="queryList.materialTypeIds"
                            :props="{ label: 'label', value:'value',children: 'children' }"
                            :data="materialTypeTree"
                            multiple
                            :render-after-expand="false"
                            show-checkbox
                            style="width: 300px"
                        />
                    </el-form-item>
                    <!-- <el-form-item label="状态" label-width="100px">
                        <el-select
                            placeholder="---请选择状态---"
                            v-model="queryList.status"
                            style="width: 300px"

                        >
                            <el-option label="---请选择---" value />
                            <el-option
                                v-for="item in optionsState"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>       -->
                    <el-form-item label="发货状态" label-width="100px">
                        <el-select
                            placeholder="---请选择发货状态---"
                            v-model="queryList.sendStatus"
                            style="width: 300px"
                        >
                            <el-option label="---请选择---" value />
                            <el-option
                                v-for="item in optionsSendState"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="收货状态" label-width="100px">
                        <el-select
                            placeholder="---请选择收货状态---"
                            v-model="queryList.taskStatus"
                            style="width: 300px"
                        >
                            <el-option label="---请选择---" value />
                            <el-option
                                v-for="item in optionsTaskState"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-form>
            </vab-query-form-top-panel>
        </el-foot>

        <el-main class="nopadding">
            <scTable
                ref="mytable"
                :queryType="'borrow-goods-order/pages'"
                :data="listData"
                :queryList="queryList"
                :column="columnList"
                :orderList="OrderList"
                :sort-orders="['ascending', 'descending']"
                @selection-change="selectionChange"
                row-key="applyOrderId"
                :row-class-name="setRowClass"
                stripe
                show-summary
                remoteSummary
                :columnDrop=true
            >
                <el-table-column type="selection" width="50"></el-table-column>
                <template #borrowGoodsOrderDate="{row}">
                    {{row.borrowGoodsOrderDate?row.borrowGoodsOrderDate?.slice(0,10):""}}
                </template>
                <template #supplierId="{row}">
                    <span class="el-span-text">{{row.supplierName}}</span>
                </template>
                <template #status="{row}">
                    <span >{{ row.statusDesc }}</span>
                </template> 
                <template #orderStatus="{row}">
                    <span >{{ row.orderStatusDesc }}</span>
                </template> 
                
                <el-table-column label="操作" fixed="right" align="center" width="260">
                    <template #default="scope">
                        <el-button-group>
                            <el-button
                                text
                                type="primary"
                                size="small"
                                @click="opShow(scope.row, scope.$index)"
                            >查看</el-button>
                            <el-button
                                text
                                type="primary"
                                size="small"
                                v-if="scope.row.orderStatus==0"
                                @click="openEdit(scope.row, scope.$index)"
                            >修改</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>
    <detail-dialog
        v-if="dialogDetail"
        ref="detailDialog"
        @fatherMethod="opBindData"
        @success="handleSaveSuccess"
        @closed="dialogDetail = false"
    ></detail-dialog>

    <save-dialog
        v-if="dialogSave"
        ref="saveDialog"
        @fatherMethod="opBindData"
        @success="handleSaveSuccess"
        @closed="dialogDetail = false"
    ></save-dialog>
</template>

<script>
import detailDialog from "./detail";
import saveDialog from "./save";

import tool from "@/utils/tool";
export default {
    name: "borrowGoodsOrder",
    components: {
        detailDialog,
        saveDialog
    },
    data() {
        return {
            dialogTask:false,
            dialogTaskItem:false,
            importState:false,
            dialogDetail: false,
            dialogSave: false,
            dialogFile:false,
            receiveSave: false,
            showCondition: false,
            selectionRows: [],
            pkList: ["borrowGoodsOrderItemId"],
            columnList: [
                  {prop:"borrowGoodsOrderDate",label:"借货时间",width:"150",sortable:true},
                  {prop:"borrowGoodsOrderName",label:"借货人",width:"150",sortable:true},
                  {prop:"borrowGoodsOrderCode",label:"借货单号",width:"140",sortable:true},
                  {prop:"materialCode",label:"物料编码",width:"140",sortable:true},
                  {prop:"materialName",label:"物料名称",width:"140",sortable:true},
                  {prop:"materialSpecs",label:"物料规格",width:"140",sortable:true},
                  {prop:"unitName",label:"单位",width:"140",sortable:true},
                  {prop:"borrowQty",label:"借货数量",width:"140",sortable:true},
                  {prop:"alreadyBackQty",label:"已还数量",width:"140",sortable:true},
                  {prop:"waitBackQty",label:"待还数量",width:"140",sortable:true},
                  {prop:"operateOrderCode",label:"关联订单号",width:"140",sortable:true},
                  {prop:"supplierId",label:"供应商",width:"140",sortable:true},
                  {prop:"status",label:"借货状态",width:"140",sortable:true},
                  {prop:"orderStatus",label:"订单状态",width:"140",sortable:true},
            ],
           
            OrderList: { borrowGoodsOrderItemId: "DESC" },
            queryList: {},
            result: "", // 运行结果
            props1: {
                checkStrictly: true,
                emitPath: false,
            },
            props: {
                label: "storeName",
                value: "storeId",
            },
            purchaseUnityProps:{
                label: "purchaseUnityName",
                value: "purchaseUnityId",
            },
            storeAutoCompleteProps:{
                label: "storeName",
                value: "storeId",
            },
            addState: true, //可以增加
            editState: true, //可以修改
            editBatchState: true, //可以批量修改
            deleteState: true, //可以删除
            optionsState: [],
            optionsSendState:[],//发货状态
            optionsTaskState:[],//收货状态
            materialTypeTree: [],
            orgType: 0,
            selectedRow:[],
            defaultTime:[
                new Date(2000, 1, 1, 0, 0, 0),
                new Date(2000, 2, 1, 23, 59, 59),
            ]
        };
    },
    methods: {
        //查看
        opShow(row) {
            this.dialogDetail = true;
            this.$nextTick(() => {
                this.$refs.detailDialog.setData(row);
                this.$refs.detailDialog.open("Show");
            });
        },
        openAdd() {
            this.dialogSave = true;
            this.$nextTick(() => { 
                this.$refs.saveDialog.setData({});
                this.$refs.saveDialog.open("Add");
            });
        },
        openEdit(row) {
            this.dialogSave = true;
            this.$nextTick(() => { 
                this.$refs.saveDialog.setData(row);
                this.$refs.saveDialog.open("Edit");
            });
        },
        setRowClass({ row ,rowIndex }) {
            if (this.selectionRows.includes(row)) {
                return "selected-row-color";
            }
            return "";
        },
        //表格选择后回调事件
        selectionChange(selection) {
            this.selectionRows = selection;
        },
        //本地更新数据
        handleSaveSuccess(data, mode) {
            if (mode == "Add") {
                this.$refs.mytable.refresh();
            } else if (mode == "Edit") {
                this.$refs.mytable.refresh();
            }
        },
        async opBindData() {
            this.$refs.mytable.clearSort();
            this.$refs.mytable.getData();
        },
        resetSearch() {
            this.queryList = {};
        },
        async initOptions() {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "base-dictionary/options",
                    { Codes: ["TrusteeshipOrderTaskStatus","PurchaseOrderSendStatus"] }
                );
                if (returnValue.status == 200) {
                    this.optionsSendState= returnValue.response.find((p) => p.code == "PurchaseOrderSendStatus").optionsDetails;
                    this.optionsTaskState= returnValue.response.find((p) => p.code == "TrusteeshipOrderTaskStatus").optionsDetails;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }

            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "material-type/tree",
                    { status: 1 }
                );
                if (returnValue.status == 200) {
                    this.materialTypeTree = returnValue.response;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
        //查看附件
        opShowFile(row)
        {
            this.dialogFile = true;
            this.$nextTick(() => {
                this.$refs.fileDialog.setData(row);
                this.$refs.fileDialog.open("Show");
            });
        }
    },
    async mounted() {
        this.$nextTick(() => {
            this.orgType = tool.data.get("USER_INFO").AccountType;
        });
       
        var applyOrderCode=this.$route.query.applyOrderCode;
        if(applyOrderCode){
            this.queryList.applyOrderCode=applyOrderCode;
        }
        await this.initOptions();
        await this.opBindData();

    },
};
</script>
<style lang="scss" scoped>
/* 当表格行处于悬停状态时改变背景颜色 */
::v-deep .el-table .el-table__row:hover {
    background-color: #dae8f7;
}
::v-deep .el-table__body .el-table__row--striped.hover-row td {
    background-color: #dae8f7 !important;
}
//   斑马纹选中颜色
::v-deep .el-table__body .el-table__row--striped.selected-row-color td {
    background-color: #b8dcff !important;
}
::v-deep .el-table {
    --el-table-row-hover-bg-color: #dae8f7;
}
</style>
<style>
.el-table .selected-row-color {
    background-color: #b8dcff !important;
}
.el-table--enable-row-hover .el-table__body tr.selected-row-color:hover > td {
    background-color: #b8dcff !important;
}
.el-table__body-wrapper .el-table__body tr.selected-row-color.hover-row > td {
    background-color: #b8dcff !important;
}
.el-table__fixed-body-wrapper
    .el-table__body
    tr.selected-row-color.hover-row
    > td {
    background-color: #b8dcff !important;
}
.el-table__body-wrapper
    .el-table__body
    tr.selected-row-color.hover-row
    > .el-table__row--striped {
    background-color: #b8dcff !important;
}
.el-table .cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
